<template>
	<div class="main">
		<!--<div class="header_title">忘记密码</div>-->

		<div class="register-form" v-if="isPhone">
			<!-- 输入手机号-->
			<div class="phone">
				<van-field
					v-model="mobile"
					type="number"
					label="手机号"
					placeholder="请输入手机号"
					maxlength="11"
					input-align="right"
				/>
				<!--<span class="code" v-if="code">
					{{ code }}
				</span>
				<span class="code" v-else @click="_getCode">获取验证码</span>-->
				<van-field
					v-model="verifyCode"
					center
					clearable
					placeholder="请输入验证码"
				>
					<template #button>
						<van-button class="br-5" size="small" type="info" @click="_getCode"
							>获取验证码</van-button
						>
					</template>
				</van-field>
			</div>
			<!-- 验证码 -->
			<!--<van-field
				v-model="verifyCode"
				type="number"
				label="验证码"
				maxlength="11"
				placeholder="请输入手机号"
				input-align="right"
			/>-->
			<van-field
				v-model="NewPassword"
				type="password"
				label="新密码"
				input-align="right"
			/>
			<van-field
				v-model="ConfirmPassword"
				type="password"
				label="确认密码"
				input-align="right"
			/>
			<div style="margin: 16px" class="bottom-btns" >
				<van-button type="info" block class="confirm-btn" @click="_submit"> 确认 </van-button>
			</div>
		</div>
		<!-- 验证手机号-->
		<div class="register-form" v-if="!isPhone">
			<van-field
				v-model="mobile"
				type="number"
				label="手机号"
				maxlength="11"
				placeholder="请输入手机号"
				input-align="right"
			/>
			<div style="margin: 16px" class="bottom-btns">
				<van-button block type="info" class="confirm-btn" @click="_confirmPhone">
					下一步
				</van-button>
			</div>
		</div>
	</div>
</template>

<script>
import { Toast } from 'vant'
import {
	ForgetPasswordVerifyMobile,
	SendSms,
	ForgetPasswordVerify,
} from '@/api/public'
var wait = 60
export default {
	components: {},
	data() {
		return {
			code: '',
			mobile: '',
			verifyCode: '',
			NewPassword: '',
			ConfirmPassword: '',
			isPhone: false,
		}
	},
	methods: {
		// 忘记密码验证手机号
		_confirmPhone() {
			if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
				this.$toast('请输入正确的手机号')
				return
			}
			const data = {
				mobile: this.mobile,
			}
			ForgetPasswordVerifyMobile(data)
				.then((res) => {
					if (!res.success) {
						this.$toast(res.errorText)
						return
					}
					setTimeout(() => {
						this.isPhone = true
					}, 1500)
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
		// 获取验证码
		_getCode() {
			if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
				this.$toast('请输入正确的手机号')
				return
			}
			this.time()
			// 发送请求,用post方式
			const data = {
				mobile: this.mobile,
			}
			SendSms(data)
				.then((res) => {
					if (res.success) {
						console.log('获取成功')
					}
				})
				.catch((err) => {
					console.log('获取失败')
				})
		},
		// 倒计时
		time() {
			var that = this
			if (wait == 0) {
				that.code = ''
				wait = 60
			} else {
				that.code = wait + 's' + '重新发送'
				wait--
				setTimeout(function () {
					that.time()
				}, 1000)
			}
		},
		// 提交忘记密码
		_submit() {
			if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
				this.$toast('请输入正确的手机号')
				return
			}
			if (!this.verifyCode) {
				this.$toast('请输入验证码')
				return
			}
			if (!this.NewPassword) {
				this.$toast('请输入密码')
				return
			}
			if (this.NewPassword !=this.ConfirmPassword) {
				this.$toast('两次密码不一致')
				return
			}
			const data = {
				NewPassword: this.NewPassword,
				verifyCode: +this.verifyCode,
			}
			Toast.loading({
				message: '加载中...',
				forbidClick: true,
			})
			ForgetPasswordVerify(data)
				.then((res) => {
					if (!res.success) {
						this.$toast(res.errorText)
						return
					}
					setTimeout(() => {
						this.$router.push('/login')
					}, 1500)
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
	},
}
</script>

<style lang="less" scoped>

.phone {
	position: relative;
	.code {
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: 12px;
	}
}
.bottom-btns {
  margin-top: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .confirm-btn {
    width: 100%;
    height: 30px;
    font-size: 12px;
  }
}
</style>

